<template>
  <TableWidget ref="refHiTable" :pagination="pagination" :columns="props.columns" :load="onLoadData"
               :has-select="false" :hide-pageable="props.hidePageable" style="flex: 1">
    <template v-slot:toolHeader>
      <TableSearchWidget ref="refSearch" :search="props.searchForm">
        <template v-slot:searchHead>
          <slot name="searchHead"/>
        </template>
        <template v-slot:searchTail>
          <el-button icon="search" plain round style="padding: 0 20px;" @click="refresh"/>
          <el-button v-if="props.createLabel" type="primary" @click="props.addItem" style="margin: 0 8px 0 24px;">
            {{props.createLabel}}
          </el-button>
        </template>
      </TableSearchWidget>
    </template>
    <template v-slot:actionBefore>
      <slot name="actionBefore"/>
    </template>
  </TableWidget>
</template>

<script setup lang="ts" name="realmUserGroup">

import {nextTick, onActivated, onDeactivated, onMounted, ref} from "vue";

import TableSearchWidget from "@/widget/TableSearchWidget.vue";
import TableWidget from "@/widget/TableWidget.vue";
import {useRouter} from "vue-router";
import {sleep} from "@/utils/DateUtil";

const refSearch = ref();
const refHiTable = ref();

const props = withDefaults(defineProps<{
  columns: any,
  loadData?: any,
  addItem: any,
  createLabel: string,
  searchForm?: any,
  hidePageable?: boolean,
}>(), {
  hidePageable: false,
});

const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
});

const onLoadData = async (params: any) => {
  let result;
  if (props.loadData) {
    result = await props.loadData(params);
  }
  return result;
}

const doRefresh = async (params: any) => {
  await refHiTable.value?.refreshData({
    ...params,
    ...refSearch.value?.getSearchParams()
  });
}

const refresh = () => {
  doRefresh({});
}

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
